<template>
  <!--
    此组件为通话记录导出任务列表，有分页组件和table
   -->
  <div class="batch_export">
      <div class="deploy">
          <div class="search-pagination">
            <Pagination
              :small="true"
              :currentPage="currentPage1"
              :count="total"
              @turnPage="turnPage"
              :totalPage="totalPage"
            >
            </Pagination>
          </div>
      </div>
      <el-table :data="tableData" stripe style="width: 100%" v-loading = "tableLoading" size="mini">
        <el-table-column prop="createTime"
                         :label="$t('customer.createTime')"
                         min-width="200"></el-table-column>
        <el-table-column prop="typeName"
                         :label="$t('customer.changeLogFrom')"
                         min-width="80"></el-table-column>
        <el-table-column :label="$t('customer.exportProgress')"
                         min-width="80"
                         prop = "state">
          <template scope="scope">
            <span :class="scope.row.class">{{scope.row.statusName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="callSheetCount"
                         :label="$t('public.sum')"
                         min-width="80"></el-table-column>
        <el-table-column prop="createUser"
                         :label="$t('public.creator')"
                         min-width="100">
          <!-- <template scope="scope">
              <agent
                :id="scope.row.creator"
                :isNum="false"
              ></agent>
          </template> -->
        </el-table-column>                 
        <el-table-column prop="remark"
                         v-if="type !== 'leakSheet'"
                         :label="$t('public.remark')"
                         min-width="200"></el-table-column>                 
        <el-table-column :label="$t('public.operate')"
                           width="130">
            <template scope="scope">
              <el-button type="text" size="small" v-if="scope.row.status === 'ready'">
                <span @click="cancelTask(scope.row._id)">{{scope.row.operate}}</span>
              </el-button>
              <el-button type="text" size="small" v-else-if="scope.row.status === 'success' || scope.row.status === 'exportSuccess'">
                <a :href="handleDownLoad(scope.$index, scope.row)"  target= '_blank' download>{{scope.row.operate}}</a>
              </el-button>
              <el-button type="text" size="small" v-else>
                <span>{{scope.row.operate}}</span>
              </el-button>
            </template>
          </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  import Agent from '@/components/public-modules/cache/Agent'
  import Pagination from '@/components/public-modules/card/Pagination'
  export default {
    data () {
      return {
        currentPage1: 1,
        pageSize: 10,
        tableData: [],
        total: 0
      }
    },
    computed: {
      totalPage () {
        return Math.ceil(this.total / this.pageSize) || 0
      }
    },
    props: {
      // 父组件传过来的请求数据
      data: {
        type: Object,
        default: function () {
          return {}
        }
      },
      // 是否展示'预计可获得录音数量'列
      records: {
        type: Boolean,
        default: function () {
          return true
        }
      },
      // 是否展示'下载地址'列
      downloadLink: {
        type: Boolean,
        default: function () {
          return true
        }
      },
      // 取消任务项
      cancelTaskShow: {
        type: Boolean,
        default: function () {
          return true
        }
      },
      currentPage: {
        type: Number,
        default: function () {
          return 1
        }
      },
      // 通过父组件数据请求是否完成, 控制table的Loading
      tableLoading: {
        type: Boolean,
        default: function () {
          return false
        }
      },
      type: {type: String, default: ''}
    },
    methods: {
      // 导出通话录音的取消任务
      cancelTask (id) {
        this.$emit('cancelTask', id)
      },
      // 将table的数据传递
      getList (resp) {
        this.tableData = resp.list
        this.total = resp.count
      },
      // 翻页向父级传递翻页请求，待参为页数
      turnPage (val) {
        this.currentPage1 = val
        this.$emit('turnPage', val)
      },
      // 根据对象存放地址的不同处理href
      handleDownLoad (index, item) {
        if (item.path) {
          let sessionId = window.sessionStorage.getItem('sessionId')
          let loginToken = window.sessionStorage.getItem('loginToken')
          if (item.path.indexOf('?') === -1) {
            return item.path + '?sessionId=' + sessionId + '&loginToken=' + loginToken
          } else {
            return item.path + '&sessionId=' + sessionId + '&loginToken=' + loginToken
          }
        }
      }
    },
    components: {
      Pagination,
      Agent
    },
    watch: {
      data (cur) {
        this.getList(cur)
      },
      currentPage (cur) {
        this.currentPage1 = cur
      }
    },
    beforeMount () {
      this.getList(this.data)
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../../assets/common.styl"
  .batch_export
    .deploy
      height 48px
      border 1px solid $c-border3
      border-bottom none
      padding-left 14px
      .search-pagination
        float right
        margin-top 10px
      .el-pagination
        padding 0
    .exportProcessing
      color $c-cAgent
    .exportSuccess
      color $c-main
    .exportError
      color $c-pink
</style>
